<template>
  <div class="function-point-container">
    <div class="header">
      <h2>CK度量</h2>
      <p>用于计算软件系统的CK数量</p>
    </div>
    <div class="content">
      <!-- 源代码数据卡片 -->
      <div class="result-section" v-if="sourceCodeData">
        <el-card class="result-card">
          <div slot="header">
            <span>源代码分析结果</span>
          </div>
          <div class="result-content">
            <el-table :data="sourceCodeResultData" style="width: 100%" :default-sort="{prop: 'fileName', order: 'ascending'}">
              <el-table-column prop="fileName" label="文件名" width="200" sortable show-overflow-tooltip></el-table-column>
              <el-table-column prop="wmc" label="加权方法数" sortable></el-table-column>
              <el-table-column prop="cbo" label="类间耦合度" sortable></el-table-column>
              <el-table-column prop="rfc" label="类的响应集合" sortable></el-table-column>
              <el-table-column prop="consultMetric" label="文件质量" sortable></el-table-column>
            </el-table>
            <!-- 添加折线图 -->
            <div class="chart-container">
              <div ref="lineChart" style="width: 100%; height: 400px;"></div>
            </div>
          </div>
        </el-card>
      </div>

    </div>

    <div class="content">
      <!-- 图片数据卡片 -->
      <div class="result-section" v-if="designData">
        <el-card class="result-card">
          <div slot="header">
            <span>图片分析结果</span>
          </div>
          <div class="result-content">
            <el-table :data="[designData]"  style="width: 100%" :default-sort="{prop: 'wmc', order: 'descending'}">
              <el-table-column prop="wmc" label="加权方法数" sortable></el-table-column>
              <el-table-column prop="dit" label="继承树深度" sortable></el-table-column>
              <el-table-column prop="noc" label="子类数" sortable></el-table-column>
              <el-table-column prop="cbo" label="类间耦合度" sortable></el-table-column>
              <el-table-column prop="rfc" label="类的响应集合" sortable></el-table-column>
              <el-table-column prop="lcom" label="方法内聚缺乏度" sortable></el-table-column>
            </el-table>
            <div class="chart-container">
              <div ref="chart" style="width: 100%; height: 400px;"></div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 当没有数据时显示提示 -->
      <div v-if="!designData && !sourceCodeData" class="no-data">
        <el-card class="result-card">
          <div class="no-data-content">
            <i class="fas fa-file-upload"></i>
            <h3>暂无数据</h3>
            <p>请先上传图片文件以进行分析</p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'FunctionPointView',
  data() {
    return {
      chart: null
    }
  },
  computed: {
    sourceCodeData() {
      return this.$store.getters.getSourceCodeData;
    },
    sourceCodeResultData() {
      if (!this.sourceCodeData || !this.sourceCodeData.topFiles) return [];
      // 预处理数据，添加总计字段
      return this.sourceCodeData.topFiles.map(file => {
        return {
          ...file,
          total: this.calculateTotal(file)
        };
      });
    },
    sourceCodeTotalPoints() {
      return this.sourceCodeResultData.reduce((sum, item) => sum + item.total, 0);
    },
    designData() {
    return this.$store.getters.getDesignData;
  }
  },
  methods: {
    calculateTotal(row) {
      const weights = {
        externalInputs: 4,
        externalOutputs: 5,
        externalQueries: 4,
        internalLogicalFiles: 7,
        externalInterfaceFiles: 7
      };
      
      return (
        row.externalInputs * weights.externalInputs +
        row.externalOutputs * weights.externalOutputs +
        row.externalQueries * weights.externalQueries +
        row.internalLogicalFiles * weights.internalLogicalFiles +
        row.externalInterfaceFiles * weights.externalInterfaceFiles
      );
    },
    initChart() {
      if (!this.sourceCodeResultData.length) return;
      
      const chartDom = this.$refs.lineChart;
      this.chart = echarts.init(chartDom);
      
      const fileNames = this.sourceCodeResultData.map(item => item.fileName);
      const series = [
        {
          name: '加权方法数',
          type: 'line',
          data: this.sourceCodeResultData.map(item => item.wmc)
        },
        {
          name: '类间耦合度',
          type: 'line',
          data: this.sourceCodeResultData.map(item => item.cbo)
        },
        {
          name: '类的响应集合',
          type: 'line',
          data: this.sourceCodeResultData.map(item => item.rfc)
        }
      ];

      const option = {
        title: {
          text: 'CK度量分布趋势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['加权方法数', '继承树深度', '子类数', '类间耦合度', '类的响应集合','方法内聚缺乏度'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: fileNames
        },
        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: series
      };

      this.chart.setOption(option);
    },
    drawRadarChart() {
      if (!this.designData) return;
      
      const chartDom = this.$refs.chart;
      this.chart = echarts.init(chartDom);
      
      // 雷达图指标配置
      const indicators = [
        { name: '加权方法数', max: Math.max(this.designData.wmc * 1.5, 10) },
        { name: '继承树深度', max: Math.max(this.designData.dit * 1.5, 10) },
        { name: '子类数', max: Math.max(this.designData.noc * 1.5, 10) },
        { name: '类间耦合度', max: Math.max(this.designData.cbo * 1.5, 10) },
        { name: '类的响应集合', max: Math.max(this.designData.rfc * 1.5, 10) },
        { name: '方法内聚缺乏度', max: Math.max(this.designData.lcom * 1.5, 10) }
      ];

      // 雷达图数据
      const seriesData = {
        value: [
          this.designData.wmc,
          this.designData.dit,
          this.designData.noc,
          this.designData.cbo,
          this.designData.rfc,
          this.designData.lcom
        ],
        name: 'CK度量指标'
      };

      const option = {
          title: {
            text: 'CK度量指标雷达图',
            left: 'center',
            textStyle: {
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              let result = params.name + '<br/>';
              params.data.value.forEach((value, index) => {
                result += indicators[index].name + ' : ' + value + '<br/>';
              });
              return result;
            }
          },
          legend: {
            data: ['CK度量指标'],
            top: 30
          },
          radar: {
            indicator: indicators,
            radius: '65%',
            center: ['50%', '55%'],
            splitNumber: 4,
            axisName: {
              color: '#333',
              fontSize: 12
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(255, 255, 255, 0.5)',
                        'rgba(255, 255, 255, 0.3)',
                        'rgba(255, 255, 255, 0.2)',
                        'rgba(255, 255, 255, 0.1)']
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(0, 0, 0, 0.2)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(0, 0, 0, 0.2)'
              }
            }
          },
          series: [{
            name: '设计质量',
            type: 'radar',
            data: [seriesData],
            symbolSize: 6,
            lineStyle: {
              width: 2
            },
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            areaStyle: {
              opacity: 0.3
            },
            label: {
              show: true,
              formatter: function(params) {
                return params.value;
              }
            }
          }],
          color: ['#c23531']
        };

      this.chart.setOption(option);
      
      // 响应式调整
      window.addEventListener('resize', () => {
        this.chart && this.chart.resize();
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.drawRadarChart();
    });
  },
  watch: {
    sourceCodeResultData: {
      handler() {
        this.$nextTick(() => {
          this.initChart();
          this.drawRadarChart();
        });
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
}
</script>

<style scoped>
.function-point-container {
  padding: 20px;
  height: 100%;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.header {
  margin-bottom: 30px;
}

.header h2 {
  color: #333333;
  margin-bottom: 10px;
}

.header p {
  color: #606266;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.result-section {
  margin-top: 20px;
  width: 100%;
}

.result-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  width: 100%;
}

.total-points {
  margin-top: 20px;
  text-align: right;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.total-points h3 {
  color: #409eff;
  margin: 0;
}

.chart-container {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.no-data {
  margin-top: 20px;
}

.no-data-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.no-data-content i {
  font-size: 48px;
  color: #909399;
  margin-bottom: 20px;
}

.no-data-content h3 {
  color: #606266;
  margin-bottom: 10px;
  font-size: 18px;
}

.no-data-content p {
  color: #909399;
  font-size: 14px;
}
</style> 